<template>
  <div>
     <el-card shadow="never" class="d2-mb">
      <el-form class="filter-container" ref="FYGLForm" :model="FYGLForm" label-width="100px">
          <el-row :gutter="20">
             <el-col :span="5">
              <el-form-item label="部门名称">
                  <el-select
                v-model="FYGLForm.department"
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in selectDepartsList"
                  :key="item.department"
                  :label="item.name"
                  :value="item.department"
                >
                </el-option>
              </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="5">
              <el-form-item label="审批状态">
                <el-select  clearable v-model="FYGLForm.status" placeholder="请选择" filterable>
                  <el-option label="草拟" value="0"></el-option>
			            <el-option label="审核中" value="1"></el-option>
                  <el-option label="已驳回" value="2"></el-option>
                  <el-option label="已退审" value="3"></el-option>
                  <el-option label="已通过" value="4"></el-option>
			        </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="5">
            <el-form-item label="购销类型">
              <el-select
                v-model="FYGLForm.direction"
                clearable
                class="filter-item"
                placeholder="请选择"
              >
                <el-option label="销售" value="1"></el-option>
                <el-option label="采购" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
             <el-col :span="5">
            <el-form-item label="原币金额">
              <el-input-number v-model="FYGLForm.matched_price" size="small" :precision="2" :step="0.1" clearable></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="期初标识">
              <el-select
                v-model="FYGLForm.begin_flag"
                clearable
                class="filter-item"
                placeholder="请选择"
              >
                <el-option label="是" value="12"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
              <el-col :span="10">
                 <el-form-item label="日期">
                <el-col :span="11" style='margin-left:-10px;'>
                  <el-date-picker type="date" placeholder="选择日期" v-model="FYGLForm.startDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line tc" :span="1">~</el-col>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="FYGLForm.endDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="FYGLChange" style='margin-top:5px;'>
                <d2-icon name="search"/> 查询
              </el-button>
            </el-col>
          </el-row>
      </el-form>
    </el-card>
    <div class='mb'>
       <el-button type="default" size="mini" @click="handleFilter_addfygl">
          <d2-icon name="plus"/>
          新增
        </el-button>
         <el-button type="default" size="mini">
          <d2-icon name="download"/>
          导入
        </el-button>
        <el-button type="default" size="mini" @click="handleFilter_editFygl">
          <d2-icon name="edit"/>
          修改
        </el-button>
         <el-button type="default" size="mini" @click="handleFilter_search">
          <d2-icon name="search"/>
          查看
        </el-button>
        <el-button type="default" size="mini" icon="el-icon-delete" @click="handleFilter_delFygl">
          删除
        </el-button>
          <el-button type="default" size="mini" @click="handleFilter_copyFygl">
          <i class="fa fa-clipboard" aria-hidden="true"></i>
          复制
        </el-button>
         <el-button type="default" size="mini" @click="handleFilter_spFygl">
          <i class="fa fa-calendar-check-o" aria-hidden="true"></i>
          提交审批
        </el-button>
         <el-button type="default" size="mini" @click="handle_NospFygl">
          <i class="fa fa-calendar-times-o" aria-hidden="true"></i>
          退审
        </el-button>
         <el-button type="default" size="mini" @click="exportExcel">
          <d2-icon name="upload"/>
          导出
        </el-button>
        <el-button type="default" size="mini" @click="refresh_Fygl">
          <d2-icon name="refresh"/>
          刷新
        </el-button>
         <el-button type="default" size="mini" @click="historicalApproval">
          <i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
          审批历史
        </el-button>
    </div>
    <el-card shadow="never" class="d2-mb titleline">
     <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
         <p class="title_l fl">资金信息</p>
     </template>
     <div>
        <el-table :data="FYGLList" style="width: 100%" border :header-cell-style="{ background: '#eef1f6','text-align': 'center' }"
        @selection-change='handleSelectionChange'>
     <el-table-column
      type="selection"
      width="40">
    </el-table-column>
    <el-table-column type="expand" width="40">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="申请人">
            <span>{{ props.row.creator_name }}</span>
          </el-form-item>
          <el-form-item label="制单时间">
            <span>{{ props.row.created_time }}</span>
          </el-form-item>
           <el-form-item label="备注">
            <span>{{ props.row.remark }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="审批状态"
      prop="status"
      :formatter="formatterSPstatus"
      >
    </el-table-column>
    <el-table-column
      label="部门名称"
      prop="department_name">
    </el-table-column>
    <el-table-column
      label="单据ID"
      prop="invoices_no">
    </el-table-column>
    <el-table-column
      label="单据日期" width="105"
      prop="date" sortable>
    </el-table-column>
   <el-table-column
      label="原币币种"
      prop="currency_name">
         <!-- <template slot-scope="scope">
            <el-select
                v-model="scope.row.currency"
                placeholder="请选择"
                style="width:100%;"
                 disabled
              >
               <el-option
                         v-for="item in selectCurrencyList"
                         :key="item.currency"
                         :label="item.name"
                         :value="item.currency"
                 >
                     <span style="float: left">{{item.name}}</span>
                     <span style="float: right; color: #8492a6; font-size: 13px">{{ item.currency}}</span>
                 </el-option>
              </el-select>
         </template> -->
    </el-table-column>
     <el-table-column
      label="原币金额"
      prop="original_price">
    </el-table-column>
    <el-table-column
      label="汇率"
      prop="exchange_rate">
    </el-table-column>
    <el-table-column
      label="本币金额"
      prop="currency_price">
    </el-table-column>
    <el-table-column
      label="已匹配金额" width="105"
      prop="matched_price">
    </el-table-column>
    <el-table-column
      label="未匹配金额" width="105"
      prop="unmatched_price">
    </el-table-column>
    <!-- <el-table-column
      label="申请人"
      prop="application">
    </el-table-column> -->
  </el-table>
     </div>
     </el-card> 
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="FYGLForm.currentPage"
      :page-size="FYGLForm.pageSize"
      layout="total, prev, pager, next"
      :total="FYGLForm.totalPage"
    >
    </el-pagination>
   <!-- 审批历史 -->
    <!-- <el-dialog :visible.sync="historicalApprovals" title="审批历史">
      <div>
    <el-tabs type="border-card">
      <el-tab-pane label="审批轨迹">
        <el-table :data="SHList" border>
          <el-table-column type="index" :index="indexMethod" label="序号">
          </el-table-column>
          <el-table-column prop="name" label="时间" sortable></el-table-column>
          <el-table-column
            prop="order"
            label="操作人"
            sortable
          ></el-table-column>
          <el-table-column
            prop="process_step"
            label="审批动作"
            sortable
          ></el-table-column>
          <el-table-column
            prop="result"
            label="审批结果"
            sortable
          ></el-table-column>
          <el-table-column
            prop="process_user"
            label="下一步审批人"
            sortable
          ></el-table-column>
          <el-table-column
            prop="desc"
            label="审批意见"
            sortable
          ></el-table-column> </el-table
      ></el-tab-pane>
      <el-tab-pane label="流程图">
        <el-steps :active="1">
          <el-step title="审核中" icon="el-icon-edit-outline"></el-step>
          <el-step title="已通过" icon="el-icon-success"></el-step>
          <el-step title="已驳回" icon="el-icon-error"></el-step>
        </el-steps>
      </el-tab-pane>
    </el-tabs>
  </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="historicalApprovals = false">关闭</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 20%;
  }
  .el-radio {
  width: 100%;
  text-align: center;
  margin-top: 15px;
}
</style>
<script>
import { confuturesCap, addfuturesCap, conCurrency, addworkorder, conworkorderhis } from '../../../../../api/url_lcc';
import { getDepartments } from '../../../../../api/url';
import { approval } from "@/api/url_info.js";
export default {
  name: "gl_cost",
  data () {
    return {
      selectDepartsList:[],
        FYGLForm:{
          page: 1, //当前页
          pageSize: 20,
          totalPage: 1,
          "department": "",
          "direction":"",
          "status":"",
          "original_price":"",
          "begin_flag":"",
          "startDate":"",
          "endDate":"",	
          },
        SHList:"",
        historicalApprovals:false,
        FYGLList: [],
        selectlistRow: [],
        selectCurrencyList:[],
        rowNum:1,
        activeName: 'first',
        CKForm: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 1,
        strategy_name: "",
        strategy_id: "",
        creator: "",
        status: "",
        department_name: "",
        strategy_objective: "",
        strategy_type: ""
      },
// 1.费用管理
      // 新增
      handleFilter_addQqcjVisible:false,
      // 红冲
      handleFilter_hcVisible:false,
      // 红虫历史
      handleFilter_hcListVisible:false,
     // 修改
      handleFilter_editQqcjVisible:false,
      // 复制
      handleFilter_copyQqcjVisible:false,
      // 调整
      handleFilter_adjustQqcjVisible:false,
      
      edit_Risk_OrderFormVisible: false,
    
    }
  },
  created() {
           this.tabledatas = [
               { title: '标题1', text: 's111sssa' },
               { title: '标题2', text: 'ss222ssa' },
           ]
           this.tabledatas.map(i => {
               i.show = false
               return i
           })
  },
  methods: {
    // ////////////////////////////////////////////////////////////敞口管理
     //  部门信息
     //树形结构转换为扁平数组
    treeToList(tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.sub_depart) {
          queen = queen.concat(first.sub_depart);
          delete first["sub_depart"];
        }
        out.push(first);
      }
      return out;
    },
     // 查询部门
    handle_getDepartments() {
      getDepartments()
        .then(res => {
          this.selectDepartsList = [];
          var data1 = res.result;
          var arr = this.treeToList(data1);
          for (var i = 0; i < arr.length; i++) {
            this.selectDepartsList[i] = {
              name: arr[i]["name"],
              department: arr[i]["id"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
  //  审批状态
  formatterSPstatus(row, column) { 
         if (row.status == "0") {
             return '草拟';
         } else if (row.status == "1") {
             return '审核中';
         } else if (row.status == "2") {
             return '已驳回';
         } else if (row.status == "3") {
             return '已退审';
         } else if (row.status == "4") {
             return '已通过';
         } 
     },
    //  费用类型
    formatterCost(row, column) {
      if (row.cap_type_all == "0") {
             return '货款';
         } else if (row.cap_type_all == "1") {
             return '资金划拨';
         } else if (row.cap_type_all == "2") {
             return '利息';
         } else if (row.cap_type_all == "3") {
             return '运输费';
         } else if (row.cap_type_all == "4") {
             return '装卸费';
         } else if (row.cap_type_all == "5") {
             return '仓储费';
         } else if (row.cap_type_all == "6") {
             return '保险费';
         } else if (row.cap_type_all == "7") {
             return '质押费';
         } else if (row.cap_type_all == "8") {
             return '清关费';
         } 
     },
     // 是否红冲
   formatterRD(row,column){
       return row.status = "0"?'否':'是'
   },
    // 敞口类型逐笔，净敞口
    formatterET(row, column) {
         if (row.exp_type == "0") {
             return '逐笔';
         } else if (row.exp_type == "1") {
             return '净敞口';
         } 
     },
    //  购销类型
    formatterDirection(row, column) {
         if (row.direction == "0") {
             return '采购';
         } else if (row.direction == "1") {
             return '销售';
         } 
     },
       // 期初标志
    formatterQC(row,column){
        // return row.begin_flag = "0"?'否':'是'
         if (row.begin_flag == "0") {
             return '否';
         } else if (row.begin_flag == "12") {
             return '是';
         } 
    },
     // 查询币种
      handle_currencyChange(){
         let params = {
              "name": "",
          };
          conCurrency(params).then(res => {
              if (res.errcode == "1") {
                 this.selectCurrencyList = []
                  var data1 = res.result
                  console.log(902,)
                for (var i = 0; i < data1.length; i++) {
                        this.selectCurrencyList[i] = {
                            currency: data1[i]['id'],
                            name: data1[i]['name']
                        };
                    }
              } else {
                  this.$message.error(res.msg);
              }
          });
      },
    // 行内编辑
    handleCellDataChange ({ rowIndex, key, value, row }) {
      console.log(rowIndex)
      console.log(key)
      console.log(value)
      console.log(row) 
    },
    handleUpload (file) {
      this.$import.xlsx(file)
        .then(({ header, results }) => {
          this.table.columns = header.map(e => {
            return {
              label: e,
              prop: e
            }
          })
          this.table.data = results
        })
      return false
    },
    // 多选
    handleSelectionChange(val) {
       this.multipleSelection = val;
     },
   // 多选提示
    openMessage() {
      this.$message({
          dangerouslyUseHTMLString: true,
          type: 'error',
          message: '<strong>请勾选你要选择的行，再进行操作！</strong>'
      });
    },
     // 获取表格选中时的数据
      selectRow (val) {
        this.selectlistRow = val
      },
    // ////////////////////////////////////////////////////////////费用管理
     // 每页数
    handleSizeChange(val) {
      this.FYGLForm.pageSize = val;
      this.FYGLForm.page = 1;
     this.FYGLChange1();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(val);
      this.FYGLForm.page = val;
      this.FYGLChange1();
    },
    // 查询
     FYGLChange(){
      this.FYGLForm.page = 1;
      this.FYGLChange1();
      this.handle_currencyChange()
    },
    FYGLChange1(){
        confuturesCap(this.FYGLForm).then(res => {
            if (res.errcode == "1") {
                this.FYGLList = []
                var data = res.result.results
                 this.FYGLForm.totalPage = res.result.count;
                for (var i = 0; i < data.length; i++) {
                  this.FYGLList = data
                  console.log(12,data)
              }
             }else{
                this.$message.error(res.msg);
            }
        });
    },
    // 新增
    handleFilter_addfygl(){
      this.$router.push({path: '/add_QHcost'});
    },
    // 修改
    handleFilter_editFygl(){
      var data = this.multipleSelection
      console.log('期货选中',this.multipleSelection)
       if (this.multipleSelection == "undefined") {
           this.openMessage();
       } else if(this.multipleSelection[0].status == '2' || this.multipleSelection[0].status == '3'){
          this.$message.error("修改只能选择一条草拟或已驳回状态费用信息！");
       } else{
         this.$router.push({name: 'edit_QHcost', params: {editList: data, type:'edit'}})
       }
    },
    // 复制
     handleFilter_copyFygl(){
       var data = this.multipleSelection
       if (this.multipleSelection == undefined) {
           this.openMessage();
       } else if(this.multipleSelection.length != 1){
          this.$message.error("修改只能选中一条数据进行！");
       } else {
          this.$router.push({name: 'edit_QHcost', params: {editList: data, type:'copy'}})
       }
    },
     // 查看
    handleFilter_search(){
      console.log(129,this.multipleSelection)
      var data = this.multipleSelection
      if (this.multipleSelection == undefined) {
           this.openMessage();
       }else{
          this.$router.push({name: 'edit_QHcost', params: {editList: data, type:'look'}})
       }
    },
    // 删除
    handleFilter_delFygl(){
    let data = this.multipleSelection
          var Deldata  = [];
          data.forEach(function(item, index) {
              var data1 = item.invoices_no
              Deldata.push(Number(data1));
           })
       if (this.multipleSelection == undefined) {
           this.openMessage();
       }else if(Deldata.indexOf(2) == '0' || Deldata.indexOf(3) == '0'){
          this.$message.error("删除只能选择草拟或已驳回状态费用信息！");
       }else{
         this.delList()
       }
    },
    del_message(){
       var data = this.multipleSelection
       var Newdata  = [];
       data.forEach(function(item, index) {
           var data1 = item.invoices_no
           Newdata.push(data1)
        })
         let params = {
            operation: 'DEL',
            futures_cap: Newdata
        };
        addfuturesCap(params).then(res => {
            if (res.errcode === "1") {
                this.$message.success(res.result);
                 this.FYGLChange();
            } else {
                this.$message.error(res.msg);
            }
        
        });
    },
     // 删除提示信息
    delList() {
       this.$confirm('是否删除数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del_message()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    // 提交审批workOrderID
    handleFilter_spFygl(){
      console.log(333,this.multipleSelection)
        var data = this.multipleSelection[0]
        let objToStr = JSON.stringify(this.multipleSelection[0]);
       if (this.multipleSelection == undefined) {
           this.openMessage();
       } else if(this.multipleSelection.length != 1){
          this.$message.error("审批只能选中一条数据进行！");
       } else{
        //  alert(111)
          let params = {
          operation: "ADD",
          business_id: this.multipleSelection[0].invoices_no,
          desc: objToStr,
          task: "FCOST"
        };
        approval(params).then(res => {
            this.FYGLChange();
            this.$message({
              message: res.result,
              type: "success"
            });
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
       }
     
    },
     //审批历史
    historicalApproval(row) {
      console.log('8',this.multipleSelection[0].status === 0)
       if (this.multipleSelection == undefined) {
           this.openMessage();
       } else if(this.multipleSelection.length != 1){
          this.$message.error("审批只能选中一条数据进行！");
       } else if(this.multipleSelection[0].status === 0){
          this.$message.error("草拟状态数据无审批历史！");
       } else{
           this.$router.push(
          "/examine_historyss?id=" +
            this.multipleSelection[0].workOrderID
        );
        };
    },
    // 退审
    handle_NospFygl(){
      console.log(12,this.multipleSelection)
        var data = this.multipleSelection
       if (this.multipleSelection == undefined) {
           this.openMessage();
       } else if(this.multipleSelection.length != 1){
          this.$message.error("退审只能选中一条数据进行！");
       } else if(this.multipleSelection[0].status != '1'){
          this.$message.error("退审只能选择审批中状态的费用信息！");
       } else{
         let params = {
            operation: "MOD",
            id: this.multipleSelection[0].workOrderID,
            status: 3,
            opinion: ""
          };
          approval(params)
            .then(res => {
              this.FYGLChange();
              this.$message({
                message: res.result,
                type: "success"
              });
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        } 
    },
    // 刷新
    refresh_Fygl(){
       this.FYGLForm.department = "", 
      this.FYGLForm.customer = "",  
      this.FYGLForm.direction = "",  
      this.FYGLForm.status = "",     
      this.FYGLForm.startDate = "",  
      this.FYGLForm.endDate = "",
       this.FYGLChange()
    },
    

  },
  mounted() {
    this.handle_getDepartments();
    this.FYGLChange();
   }
  }
</script>
